<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue'
import {QTable, type TableColums,} from '@meetjs/element-plus-kit'
import axios from "axios";
import {ElMessage, ElMessageBox} from "element-plus";
import { QForm, type FormItemRows } from "@meetjs/element-plus-kit";
const headers = {
  token: localStorage.getItem("doctor-auth-token")
}
const editCaseFormRef = ref<any>(null)

const caseFormRef = ref<any>(null);
const patientOptions = ref([])
const getPatientData = () => {
  axios.post('/api/auth/list/roles?roles=患者',{},{headers})
      .then(res=>{
        patientOptions.value = []
        const msg = res.data.message
        patientOptions.value = msg.map(el => ({
          label: `${el.name}-${el.sexs}-${el.bornDate}`,
          value: el.userPk
        }))
        // console.log(patientOptions.value);
      })
}
getPatientData()
const caseFormOptions = ref<FormItemRows[]>([
  {type: "slot", label: "患者", prop: "customslot",},
  { type: "textarea", label: "主诉", prop: "complaints" },
  { type: "textarea", label: "现病史", prop: "xbs" },
  { type: "textarea", label: "既往史", prop: "jws" },
  { type: "textarea", label: "诊断结果", prop: "results" }
]);

const editCaseFormOptions = ref<FormItemRows[]>([
  {type: "slot", label: "患者", prop: "customslot",},
  { type: "textarea", label: "主诉", prop: "complaints" },
  { type: "textarea", label: "现病史", prop: "xbs" },
  { type: "textarea", label: "既往史", prop: "jws" },
  { type: "textarea", label: "诊断结果", prop: "results" }
]);


const title = ref('就诊管理信息')

const page = ref({currentPage: 1, pageSize: 10, total: 0})

const tableData = ref([])
const columns = ref<TableColums[]>([
  {label: '序号', type: 'index', align: 'center', width: 60},
  {prop: 'doctorId.name', label: '医生', width: 100},
  {prop: 'patientId.name', label: '患者-姓名', width: 100},
  {prop: 'complaints', label: '主诉'},
  {prop: 'xbs', label: '现病史'},
  {prop: 'jws', label: '既往史'},
  {prop: 'results', label: '诊断结果'},
  {prop: 'inputTime', label: '诊断时间', width: 200},
  {prop: 'action', fixed: 'right', label: '操作', width: 200,},
])

const caseInfo = reactive({
  patientId:"",
  complaints:'',
  xbs:'',
  jws:'无',
  results:''
})
const editCaseInfo = reactive({
  patientId:"",
  complaints:'',
  xbs:'',
  jws:'无',
  results:'',
  doctorId:'',
  caseId:''
})

const isShowEdit = ref(false)
const getCaseInfo = () => {
  axios.post(`/api/case/list/${page.value.currentPage}/${page.value.pageSize}`)
      .then(res => {
        const msg = res.data.message
        msg.list.forEach(el=>{
          el.doctorId = JSON.parse(el.doctorId)
          el.patientId = JSON.parse(el.patientId)
        })
        page.value.total = msg.total
        tableData.value = msg.list
      })
}
onMounted(() => {
  getCaseInfo()
  getPatientData()
})
setInterval(() => {
  getCaseInfo()
  getPatientData()
}, 3000)


const onSubmitCase = () => {
  console.log(caseInfo);
  axios.post('/api/case/create',caseInfo,{headers})
      .then(res=>{
        if(res.data.success){
          ElMessage({
            type:'success',
            message:"添加成功"
          })
        }else{
          ElMessage({
            type:"error",
            message:res.data.message
          })
        }
        setTimeout(()=>{
          getCaseInfo()
          isCase.value = false
        },200)
      })
}
const onCancelCase = () => {
  isCase.value = false
}
const isCase = ref(false)
const nowCase = () =>{
  isCase.value = true
  caseInfo.patientId = ''
  caseInfo.jws='无'
  caseInfo.xbs=''
  caseInfo.results=''
  caseInfo.complaints = ''
}
const removeC = (row) => {
  console.log(row)
  ElMessageBox.confirm('是否删除该条病例记录？')
      .then(() => {
        axios.post("/api/case/del/"+row.caseId,{},{headers})
            .then(res=>{
              if(res.data.success){
                ElMessage({
                  type:'success',
                  message:"删除成功"
                })
              }else{
                ElMessage({
                  type:"error",
                  message:res.data.message
                })
              }
              getCaseInfo()
            })
      })
      .catch(() => {
        // catch error
      })
}
const editC = (row) => {
  console.log(row);
  isShowEdit.value = true
  editCaseInfo.patientId = row.patientId.userPk
  editCaseInfo.xbs = row.xbs
  editCaseInfo.jws = row.jws
  editCaseInfo.results = row.results
  editCaseInfo.complaints = row.complaints
  editCaseInfo.doctorId = row.doctorId.userPk
  editCaseInfo.caseId = row.caseId
}
const onCancelEditCase = () => {
  isShowEdit.value = false
}
const onSubmitEditCase = () => {
  axios.post("/api/case/update",editCaseInfo,{headers})
      .then(res=>{
        if(res.data.success){
          ElMessage({
            type:'success',
            message:"修改成功"
          })
        }else{
          ElMessage({
            type:"error",
            message:res.data.message
          })
        }
        setTimeout(()=>{
          isShowEdit.value = false
          getCaseInfo()
        },200)
      })
}
</script>

<template>
  <div>
    <QTable :columns="columns" :data="tableData" :page="page" :title="title" @pageChange="getCaseInfo">
      <template #headerRight>
        <el-button type="primary" @click="nowCase">就诊</el-button>
      </template>
      <template #action="scope">
        <el-button size="small" text type="primary" @click="editC(scope.row)">编辑</el-button>
        <el-button size="small" text type="danger" @click="removeC(scope.row)">删除</el-button>
      </template>

      <template #empty>
        <div style="font-weight:400;font-size:32px;margin: 30px;">暂无就诊信息</div>
      </template>
    </QTable>
    <el-dialog v-model="isShowEdit" :close-on-click-modal="false" title="就诊信息" width="500">
      <QForm ref="editCaseFormRef" label-width="125px" :model="editCaseInfo" :formOptions="editCaseFormOptions"
             :buttons="['cancel', { label: '确认修改', type: 'submit' }]" @cancel="onCancelEditCase"
             @submit="onSubmitEditCase"
      >
        <template #customslot>
          <el-select-v2
              v-model="editCaseInfo.patientId"
              :options="patientOptions"
              placeholder="请选择患者"
              size="large"
              style="width: 240px"
          />
        </template>
      </QForm>

    </el-dialog>
    <el-dialog v-model="isCase" title="新增病例" width="500" :close-on-click-modal="false">
      <QForm ref="caseFormRef" label-width="125px" :model="caseInfo" :formOptions="caseFormOptions"
             :buttons="['cancel', { label: '诊断结束', type: 'submit' }]" @cancel="onCancelCase"
      @submit="onSubmitCase"
      >
        <template #customslot>
          <el-select-v2
              v-model="caseInfo.patientId"
              :options="patientOptions"
              placeholder="请选择患者"
              size="large"
              style="width: 240px"
          />
        </template>
      </QForm>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>

</style>
